<template>
  <div>
    <div class="buy_box">
      <div class="buy_content" v-for="item in 10" :key="item">
        <div class="buy_hot"
          ><span style="padding: 5px 20px; border-radius: 16px; background-color: #0960bd"
            >热销</span
          >
        </div>
        <!-- <div class="demo-image__preview image">
          <el-image
            style="width: 100%; height: 100%; object-fit: contain; border-radius: 16px"
            :src="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F9e8bd863-bf16-4647-abf0-88490ce78ced%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&amp;refer=http%3A%2F%2Fsafe-img.xhscdn.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1692239797&amp;t=a656713f3185954147d0d361bef4b02d'"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[
              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F9e8bd863-bf16-4647-abf0-88490ce78ced%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&amp;refer=http%3A%2F%2Fsafe-img.xhscdn.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1692239797&amp;t=a656713f3185954147d0d361bef4b02d',
            ]"
            :initial-index="4"
            fit="cover"
          />
        </div> -->
        <div
          style="
            display: flex;
            align-items: center;
            height: 50px;
            margin: 10px 20px;
            font-size: 18px;
            font-weight: bolder;
          "
          >130G流量-不限时间</div
        >
        <div style="height: 90px; background: linear-gradient(to right, #ffab4b, #ff754b)">
          <div
            class="Font"
            style="
              display: flex;
              align-items: center;
              height: 50px;
              margin-left: 20px;
              color: white;
              font-size: 18px;
              font-weight: 700;
            "
            >¥14.90</div
          >
          <div style="height: 50px; margin-left: 20px; color: white">一次性</div>
        </div>
        <div class="center-text" style="margin: 10px 20px">
          <div>
            <div style="padding: 2px">支持流媒体播放</div>
            <div style="padding: 2px">不限制使用人数</div>
            <div style="padding: 2px">不限制到期时间</div>
            <div style="padding: 2px">不限制网络速度</div>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between; margin: 10px 20px">
          <div></div>
          <el-button size="small" color="#0960bd" style="color: white">立即订阅</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup></script>
<style lang="scss">
  .buy_box {
    display: grid;
    grid-auto-rows: 360px;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif !important;
  }

  .buy_content {
    position: relative;
    margin: 20px;
    transition-property: background, box-shadow, background-color, margin;
    transition-duration: 0.25s, 0.5s;
    animation: fadenum 0.5s 1;
    border: 5px solid rgb(163 221 221 / 30%);
    border-radius: 16px;

    /* background-color: rgb(28 66 150 / 10%); */

    background-color: white;

    /* box-shadow: 5px 5px 0 0 rgb(28 66 150 / 40%); */
  }

  .buy_content:hover {
    // position: relative;
    // bottom: 10px;
    // margin: 5px;
    // font-size: 20px;
    // padding: 5px;
    // width: 350px;
    margin-right: 2px;
    // background-color: rgb(180 213 213 / 10%);
    box-shadow: 10px 10px 0 0 #0960bd;

    .Font {
      color: red;
    }

    /* margin: 0 0 5px 5px; */

    /* margin: 2px; */
  }

  @keyframes fadenum {
    0% {
      // opacity: 0;
      // position: relative;
      transform: rotate(1deg);
    }

    20% {
      transform: rotate(2deg);
    }

    40% {
      transform: rotate(3deg);
    }

    80% {
      transform: rotate(4deg);
    }

    100% {
      transform: rotate(5deg);
    }
  }

  .buy_hot {
    display: flex;
    position: absolute;
    top: 0%;
    left: 72%;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 40px;
    border-radius: 16px;
    // transform: rotate(45deg);
    // transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
    // background: #f5f5f5;
    color: white;
    text-align: center;
  }

  .image {
    position: absolute;
    right: -0.5%;
    bottom: -0.9%;
    width: 160px;
    height: 160px;
    border-radius: 16px;
  }
</style>
